iT邦幫忙

2021 iThome 鐵人賽

DAY 2
2

簡介

今天會講一下在設計前要怎麼建立環境,畢竟在設計前還是要先備好畫布嘛,但畫布的尺寸要怎麼挑選呢?所以下面會簡單講一下怎麼根據瀏覽器的尺寸和Bootstrap 5,在Adobe XD設定Grid System 網格系統!
不過這邊要先說明一下,由於這次是實作挑戰,所以不太會有太入門或詳細的介紹如何使用Adobe XD唷,如果是完全新手建議先看其他大師的教學XDD!

步驟

Grid system的設定

首先,先來選擇PC版的畫布大小,這次會選擇 1366x768 去設計。
https://ithelp.ithome.com.tw/upload/images/20210916/20139489LSQxKBTnw0.png

參考Bootstrap 5 的 Grid system

https://ithelp.ithome.com.tw/upload/images/20210916/20139489DRsMyBRgkH.png
我們的瀏覽器是1366,所以根據上圖顯示的圖表,是屬於xl(≥1200px)。
以下就是要列出的數值:

  • Container:瀏覽器 - 左右兩邊的Margin(即是Gutter Width的一半)
    → 1140px - ( 12px + 12px ) = 1116px
  • Columns:12
  • Gutter width:1.5 rem(24px)

在XD裡調整Grid的設定

https://ithelp.ithome.com.tw/upload/images/20210916/20139489d0EVESBAX8.png
點選畫布後,看看右下方,會顯示上圖的設定,接下來要設定數值:

  1. 設定Columns為12px
  2. 設定Gutter width為24px
  3. 計算左右Margin的算式為(瀏覽器寬度-container寬度)/2
    →(1366 - 1116)/ 2
  4. 設定linked left/right margins為125px (上一行算出來的數值)
  5. 這樣就可以快速完成設定啦!

圖片及顏色的選擇

設定好Grid system後,接下來要確定Landing Page的主要色及圖片。這邊會先大概找好需要的圖片,這樣才能確定Landing page的主要顏色。下方的圖片是我找來當header的背景圖,因此這次的主要色將會選擇紅色色系。

*注意:紅色通常是用於「Danger」,所以若選擇紅色色系時,不能直接用亮紅色為主要色,以免使用者混擾。

Landing Page需要的圖片

https://ithelp.ithome.com.tw/upload/images/20210916/20139489fFrijMBQfn.jpg

Landing Page的主要顏色

  • Primary:#9B3C05
  • Secondary:#FDFCFC
  • Text:#707070
  • Primary-light:#EFDFD6

下載Bootstrap 5的檔案以參考裡面的設定

接下來終於要去找Bootstrap作為設計的參考了!!

  1. 去官網快速下載原始檔案(下方提供官網,按進去後找「原始檔案」)

    Bootstrap官網

https://ithelp.ithome.com.tw/upload/images/20210916/20139489Ai0HjRwrd7.png

  1. 去VSCODE開啓剛剛下載的BS5檔案,並打開scss資料夾裡的_variables.scss

https://ithelp.ithome.com.tw/upload/images/20210916/20139489ThxFw2qzhM.png

  1. _variables.scss檔裡,參考看看裡面的文字大小、間距、在元件等等的設定
    *不一定要跟Bootstrap裡所寫的一模一樣,但至少可以跟著它的原則去畫,這樣切版切起來也會比較方便唷!

https://ithelp.ithome.com.tw/upload/images/20210916/201394897L9g4YLsRB.png

https://ithelp.ithome.com.tw/upload/images/20210916/20139489LFZsdtnJ9B.png

https://ithelp.ithome.com.tw/upload/images/20210916/20139489OoZrvgJ90y.png

結論

因為時間的關係,所以就先跳過主題發想的部分(哈哈哈哈真的不是懶惰!)。今天主要先把Adobe XD的環境建立好,把設計稿會用到的圖片和主要顏色想好,下一篇開始將會一步一步地跟著Bootstrap來設計!明天見^_____^


上一篇
【設計+切版30天實作】|Day1 - 開賽宣言
下一篇
【設計+切版30天實作】|Day3 - 參考Bootstrap畫出理想的header(上集)
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言